<template>
  <v-container fluid grid-list-md>
    <v-layout vertical wrap>
      <v-flex xs12 md12>品牌库存报表报表</v-flex>
    </v-layout>

    <v-layout vertical wrap>
      <v-flex xs12 md12>
        <v-card>
          <v-card-title class="px2">
            <v-layout horizontal>
              <v-flex xs4 md4>
                <el-date-picker
                  v-model="validityTermStart"
                  type="date"
                  placeholder="选择时间"
                  :picker-options="pickerOptionsStart"
                  value-format="yyyy-MM-dd"
                  style="width:100%;margin-right:10px;"
                ></el-date-picker>
              </v-flex>
              <v-flex xs4 md4>
                <el-select
                  style="width:100%;margin-right:10px;"
                  class="item-choose"
                  v-model="value"
                  filterable
                  placeholder="选择品类"
                >
                  <el-option
                    v-for="(item,index) in options"
                    :key="index"
                    :label="item.plmc+'('+item.plbm+')'"
                    :value="item.plbm"
                  ></el-option>
                </el-select>
              </v-flex>
              <v-flex xs4 md4>
                <!-- <el-select style="width:100%;margin-right:10px;" /> -->
                <el-button @click="query">查询</el-button>
              </v-flex>
            </v-layout>
          </v-card-title>
          <v-card-text class="px2">
            <div ref="pie" style="width:50em;height:50em"></div>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/pie");
require("echarts/lib/component/title");
import "echarts/lib/component/toolbox";
import "echarts/lib/component/tooltip";

export default {
  name: "brandStockReport",
  data() {
    return {
      validityTermStart: "",
      options: [],
      value: ""
    };
  },
  mounted() {
    this.getDataFromServer();
    this.$nextTick(() => {
      const pie = echarts.init(this.$refs.pie);
      let now = new Date();
      if (this.validityTermStart === "") {
        this.validityTermStart =
          now.getFullYear() +
          "-" +
          (now.getMonth() + 1) +
          "-" +
          (now.getDate() - 1);
      }
      pie.setOption({
        title: {
          text: "访问来源"
        },
        series: [
          {
            name: "库存占比",
            type: "pie",
            radius: "55%",
            center: ["15%", "15%"],
            data: [].sort(function(a, b) {
              return a.value - b.value;
            })
          }
        ],
        itemStyle: {
          emphasis: {
            // 阴影的大小
            shadowBlur: 200,
            // 阴影水平方向上的偏移
            shadowOffsetX: 0,
            // 阴影垂直方向上的偏移
            shadowOffsetY: 0,
            // 阴影颜色
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      });
    });
  },
  methods: {
    query() {
      console.log(this.data);
      this.$http
        .get("/item/report/ppkucn", {
          params: { rq: this.validityTermStart, plbm: this.value }
        })
        .then(resp => {
          console.log(resp);

          const pie = echarts.init(this.$refs.pie);

          this.data = resp.data;
          pie.setOption({
            title: {
              text: "库存占比"
            },
            legend: {
              data: this.data
            },
            tooltip: { show: true },
            series: [
              {
                name: "库存占比",
                type: "pie",
                radius: "55%",
                center: ["50%", "50%"],
                data: this.data,
                label: {
                  normal: {
                    formatter: "{d}% \n{b}"
                  }
                }
              }
            ],
            itemStyle: {
              emphasis: {
                // 阴影的大小
                shadowBlur: 200,
                // 阴影水平方向上的偏移
                shadowOffsetX: 0,
                // 阴影垂直方向上的偏移
                shadowOffsetY: 0,
                // 阴影颜色
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          });

          pie.hideLoading();
        })
        .catch();
    },
    getDataFromServer() {
      this.$http
        .get("/item/item/pl?level=2")
        .then(resp => (this.options = resp.data))
        .catch();
    },
    pickerOptionsStart() {
      disabledDate: time => {
        if (this.validityTermEnd) {
          return (
            time.getTime() < Date.now() - 8.64e7 ||
            time.getTime() >
              new Date(this.validityTermEnd).getTime() - 1 * 24 * 60 * 60 * 1000
          );
        }
        return time.getTime() < Date.now() - 8.64e7;
      };
    }
  }
};
</script>

<style scoped>
</style>
